import React from 'react';
import styles from './index.less';

import { Card, Col, Row, Divider } from 'antd';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import { connect } from 'umi';

const { Meta } = Card;

const Group = (props) => {
  return (
    <Row gutter={[16, 16]}>
      {props.items.map((item, i) => (
        <Col span={6}>
          <Card
            hoverable
            style={{ margin: '0 auto', width: 200, height: 200 }}
            cover={<img style={{ width: 200, height: 158 }} src={"http://localhost:5000/src/assets/images/" + item.img} />}
            bodyStyle={{ padding: 6 }}
          >
            <Meta style={{ margin: 0, padding: 0 }} title={item.title} />
          </Card>
        </Col>
      ))}
    </Row>
  );
}


const Demo = (props) => {
  const { data = {} } = props.demo;
  return (
    <>
      {Object.keys(data).map((key) => (
        <div>
          <Divider orientation="left">{key}</Divider>
          <Group items={data[key]} />
        </div>
      ))}
    </>
  );
}

export default connect(({ demo }) => ({ demo }))(Demo);
